<template>
  <div>
    <slot name="toolbar"></slot>
    <table :id="config.id.slice(1)">
      <slot name="thead"></slot>
    </table>
  </div>
</template>

<script>
  import {baseUrl} from "@/constant";

  export default {
    props: {
      config: {
        type: Object,
        default () {
          return {};
        }
      }
    },
    mounted () {
      const defaultConfig = {
        method: "get",
        url: `${baseUrl}${this.$parent.API.query}`,
        fitColumns: true,
        nowrap: false,
        singleSelect: true,
        loadFilter (data) {
          return data.d ? data.d : data;
        },
        onLoadError: (res) => {
          this.$message({
            type: "error",
            message: `错误代码：${res.status}`
          });
        }
      };

      if (this.config.edit) {
        defaultConfig.onDblClickCell = this.$parent.handleEditRow;
      }

      defaultConfig.onClickCell = this.$parent.handleEndEditRow;

      $(this.config.id)[this.type()](Object.assign(defaultConfig, this.config));

      this.datagridResize();

      dataGridResizeArr.push({
        [this.config.id]: this.datagridResize
      })
    },
    methods: {
      type () {
        return this.config.type === "treegrid" ? "treegrid" : "datagrid";
      },
      datagridResize () {
        try {
          const height = $(window).height() - $(this.config.id).parents(".datagrid").offset().top - 20;
          $(this.config.id)[this.type()]("resize", {
            height: height
          });
        } catch (e) {
//          console.log(e);
        }
      }
    }
  }
</script>
<style>
</style>
